﻿<style>
    td.details-control {
        background: url('/Assets/res/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.shown td.details-control {
        background: url('/Assets/res/details_close.png') no-repeat center center;
    }
</style>
<div class="row">
    <div class="col-xs-12">
        <!--编辑区域定义开始-->
        <div hidden="hidden" id="editArea">
            <!--桌面端显示-->
            <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                <a class="act-process tooltip-error" data-rel="tooltip" data-placement="bottom" data-original-title="办理" href="javascript:void(0)">
                    <i class=" icon-edit bigger-130"></i>
                </a>
            </div>
            <!--移动端显示-->
            <div class="visible-xs visible-sm hidden-md hidden-lg">
                <div class="inline position-relative">
                    <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown">
                        <i class="icon-caret-down icon-only bigger-120"></i>
                    </button>

                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                        <li>
                            <a href="javascript:void(0)" class=" act-process tooltip-info" data-rel="tooltip" title="" data-original-title="办理">
                                <span class="blue act-detail">
                                    <i class=" icon-edit bigger-120"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--编辑区域定义结束-->
        <!--表格区域定义开始-->
        <div class="table-header">
            查询到的任务列表如下：
            <button class="btn btn-success" onclick="table.ajax.reload().draw(false)">
                <i class="icon-refresh bigger-120"></i>
                刷新
            </button>
        </div>
        <table id="dtFiles" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>流程名称</th>
                    <th>当前活动</th>
                    <th>任务类型</th>
                    <th>发送者</th>
                    <th>发送日期</th>
                    <th>完成日期</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
        </table>
        <!--表格区域定义结束-->
    </div>
</div>
<script src="~/Assets/js/jquery.dataTables.min.js"></script>
<script src="~/Assets/js/jquery.dataTables.bootstrap.js"></script>
<script src="~/Assets/js/flexflow-tools.js"></script>
<script>
    var table;
    $(document).ready(function () {
        //初始化表格
        table = $('#dtFiles').DataTable({
            "ajax": {
                'url': "/FFEUserAPI/GetUserTasks",
                'type': 'POST'
            },
            "columns": [
                {
                    "data": "id",
                    "visible": false,
                },
                { "data": "procName" },
                { "data": "actName" },
                { "data": "taskType" },
                { "data": "senderName" },
                { "data": "sendTime" },
                { "data": "compTime" },
                {
                    "data": "tag",
                    "render":
                        function (data, type, full, meta) {
                            return buildTag(data);
                        }
                },
                {
                    "orderable": false,
                    "data": null,
                    "defaultContent": $('#editArea').html()
                }
            ],
            "language": {
                "url": "/assets/res/DT_Language_zh_CN.txt"
            }
        });
        //绑定ToolTip
        table.on("draw.dt", function () {
            $('[data-rel=tooltip]').tooltip();
        })
        // Add event listener for opening and closing details
        $('#dtFiles tbody').on('click', '.act-process', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            $.ajax({
                type: 'GET',
                url: "/FlexFlow/TaskDetail?taskId=" + row.data().id,
                success: function (data) {
                    bootbox.dialog({
                        message: data,
                        title: "办理任务"
                    });
                }
            });
            //openNewWindow("/WorkFlowForm/Form?formId=" + row.data().id,
            //    '编辑表单-' + row.data().name);
            //navgateUrl("/ProcessDefine/Edit?id=" + row.data().id)
        });
    });

</script>